<template>
	<view>
		<!-- 歌曲收藏列表 -->
		<view class="audio-list" style="text-align: center; width: 100%;" v-for="(current,index) in audioList"
			:key="index">
			<audio style="text-align: left" :src="current.src" :poster="current.img" :name="current.name"
				:author="current.author" controls>
			</audio>
			<uni-icons type="trash-filled" size="60" color="red" @click="showDeleteDialog(current)">
			</uni-icons>
		</view>
		<!-- 确认取消收藏弹窗框 -->
		<view class="example-body box">
			<uni-popup ref="deleteDialog" type="dialog">
				<uni-popup-dialog :title="'取消收藏'" :content="'您确定要取消收藏歌曲 <<' + currentToDelete.name + ' >>吗？'"
					@confirm="confirmDelete(currentToDelete.id)">
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				audioList: [], //音频数据
				currentToDelete: {} //存储当前要删除的歌曲ID
			}
		},
		methods: {
			//获取歌曲收藏初始数据
			fetchMusicData() {
				uni.request({
					url: "https://apifoxmock.com/m1/5460619-0-default/getAllFavorite",
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							this.audioList = res.data;
							this.audioLoading = false; // 加载完成，设置加载状态为 false
						}
					},
				});
			},
			//显示删除确认框
			showDeleteDialog(current) {
				this.$refs.deleteDialog.open();
				//存储当前要删除的歌曲信息
				this.currentToDelete = current;
			},
			//确认删除
			confirmDelete(id) {
				uni.request({
					url: `https://m1.apifoxmock.com/m1/5460619-0-default/deleteFavoriteById/${id}`,
					method: 'DELETE', // 请求方式
					success: (res) => {
						if (res.data.statusCode === 200) {
							uni.showToast({
								title: res.data.message
							})
							this.audioList = res.data.data;
						} else {
							uni.showToast({
								title: "删除失败",
								icon: 'error'
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络错误，请稍后再试',
							icon: 'none'
						});
					}
				});
			},
		},
		// 页面一加载便获取歌曲收藏列表
		onLoad() {
			this.fetchMusicData();
		}
	}
</script>

<style lang="scss">

</style>